<template>
  <div>
    <el-row>
      <el-col>
        <div id="pieid" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let pieid = this.$echarts.init(document.getElementById('pieid'));
        // 绘制图表
        pieid.setOption(
/*          {
            legend: {
              bottom: 20,
              textStyle:{
                color:'#fff',
              },
              data: ['钥匙量', '有效房源量']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '10%',
              containLabel: true
            },

            tooltip: {
              show:"true",
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            xAxis:  {
              type: 'value',
              axisTick : {show: false},
              axisLine: {
                show: false,
                lineStyle:{
                  color:'#fff',
                }
              },
              splitLine: {
                show: false
              },
            },
            yAxis: [
              {
                type: 'category',
                axisTick : {show: false},
                axisLine: {
                  show: true,
                  lineStyle:{
                    color:'#fff',
                  }
                },
                data: ['广州','深圳','东莞','天津','惠州','北京三级','成都','南京','重庆','长沙']
              },
              {
                type: 'category',
                axisLine: {show:false},
                axisTick: {show:false},
                axisLabel: {show:false},
                splitArea: {show:false},
                splitLine: {show:false},
                data: ['广州','深圳','东莞','天津','惠州','北京三级','成都','南京','重庆','长沙']
              },

            ],
            series: [
              {
                name: '有效房源量',
                type: 'bar',
                yAxisIndex:1,

                itemStyle:{
                  normal: {
                    show: true,
                    color: '#277ace',
                    barBorderRadius:50,
                    borderWidth:0,
                    borderColor:'#333',
                  }
                },
                barGap:'0%',
                barCategoryGap:'50%',
                data: [120, 132, 101, 134, 90, 230, 210, 125, 231, 132]
              },
              {
                name: '钥匙量',
                type: 'bar',
                itemStyle:{
                  normal: {
                    show: true,
                    color: '#5de3e1',
                    barBorderRadius:50,
                    borderWidth:0,
                    borderColor:'#333',
                  }
                },
                barGap:'0%',
                barCategoryGap:'50%',
                data: [32, 52, 41, 64, 15, 10, 32, 25, 210, 32]
              }

            ]
          }*/
        {
          tooltip: {
            trigger: 'item'
          },
          textStyle:{
            color:'#fff',
          },
          xAxis: {
            type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} W'
            },
          },
          series: [{
            data: [82, 93, 90, 93, 86, 98, 50, 23, 84, 69, 45, 88],
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: "#57bdda"
              },
            },
          }]
        }
        );
      }
    }
  }
</script>

<style scoped>

</style>
